<template>
	<div class="container">
		<div class="choose">请选择登录角色</div>
		<div class="card" v-for="(item,index) in List" :key="index">
			<div>
				<p class="merchantType" :style="{color:item.type==1?'#B081FF':'#FF8196'}">{{TYPE[item.type]}}</p>
				<p class="merchantName" :style="{color:item.type==1?'#B081FF':'#FF8196'}">{{item.merchantShortName}}</p>
			</div>
			<div class="btn">
				<button type="primary" size="mini" :style="{backgroundColor:item.type==1?'#B081FF':'#FF8196'}"
					class="btnPrimary" @tap="enterHome(item)">进入角色</button>
			</div>
		</div>

		<u-top-tips ref="uTips"></u-top-tips>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				List: [],
				TYPE: {
					1: '线上商家',
					2: '线下商家'
				}
			}
		},
		mounted() {
			this.getRoles();
		},
		methods: {
			getRoles() {
				this.$u.api.roles().then(res => {
					if (res.code == 0) {
						this.List = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			enterHome(item) {
				// if (JSON.stringify(item.type) == 2) {
				// 	this.$refs.uTips.show({
				// 		title: '敬请期待。。。',
				// 		type: 'warning',
				// 		duration: '2300'
				// 	})
				// 	return
				// }
				if (item.availableStatus != 0) {
					this.$refs.uTips.show({
						title: item.availableStatusDesc,
						type: 'warning',
						duration: '2300'
					})
					return
				}

				uni.setStorageSync('mid', JSON.stringify(item.merchantId));
				uni.setStorageSync('merShortName', JSON.stringify(item.merchantShortName));
				uni.setStorageSync('type', JSON.stringify(item.type)); //1线上 2线下
				uni.switchTab({
					url: "/pages/rols/home"
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		background-image: url('@/static/rols/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.choose {
		color: white;
		height: 100px;
		line-height: 100px;
		font-size: 16px;
	}

	.card {
		background-color: white;
		border-radius: 5px;
		padding: 12px;
		width: 80%;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
	}

	.merchantType {
		font-size: 18px;
		font-weight: bold;
		padding-bottom: 8px;
	}

	.btn {
		display: flex;
		align-items: center;
	}

	.btnPrimary {
		border-radius: 20px;
	}
</style>
